<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-11 17:48:20
 * @Description: 
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title">
    <div slot="page_body">
      <div class="page_body">
        <div class="header_bg">
          <img src="@/assets/images/pay/pay_success_icon.png" alt="" />
        </div>

        <van-cell-group class="cell_group">
          <van-cell
            class="cell_items"
            title-class="cell_title"
            value-class="right_item"
            title="订单编号:"
            :value="signup.ordersn?signup.ordersn:''"
            center
          />
        </van-cell-group>

        <van-cell-group class="cell_group">
          <van-cell
            class="cell_items"
            value-class="right_item fee_item"
            title-class="cell_title"
            title="实付金额:"
            center
            :value="'¥' + signup.fee + ' 元'"
          />
          <van-cell
            class="cell_items"
            value-class="right_item"
            title-class="cell_title"
            title="支付方式:"
            center
            :value="signup.pay_type"
          />
          <van-cell
            class="cell_items"
            value-class="right_item"
            title-class="cell_title"
            center
            title="赛事名称:"
            :value="signup.match_name"
          />
          <van-cell
            class="cell_items"
            center
            value-class="right_item"
            title-class="cell_title"
            title="姓名:"
            :value="signup.realname"
          />
        </van-cell-group>
        <div class="bottom_buttons" style="text-align:center">
          <router-link to="/" tag="button" class="btn btn-default"
            >查看赛事</router-link
          >
          <img :src="signup.code" alt="" :onerror="defaultImg" style="width:5rem;height:5rem">
          <!-- <router-link to="/" tag="button" class="btn btn-info"
            >返回首页</router-link
          > -->
        </div>
      </div>
    </div>
  </commonPage>
</template>
<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);

import commonPage from "../common/commonPage";
export default {
  name: "pay_success",
  data() {
    return {
      header_title: "支付成功",
      signup: {
        fee: "0.00",
        pay_type: "微信支付",
        match_name: "--",
        realname:'--',
        code:''
      },
      // defaultImg:'this.src="'+this.signup.first_picture+'"',
    };
  },
  computed: {},
  components: {
    commonPage
  },
  created() {
    let that = this;
    this.queueid = this.$route.params.queueid;
    //执行页面数据加载
    that.$axios.all([that.get_queue(1)]).then(
      that.$axios.spread(function(queue) {
        console.log(123123);
        console.log(queue.result.signup);
        that.signup = queue.result.signup;
        that.signup.pay_type = "微信支付";
        that.show_loading = false;
      })
    );

    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    get_queue(init = 0) {
      let that = this;
      let obj = this.$axios({
        url: "signup.getSignUp",
        method: "post",
        data: { queueid: that.queueid }
      });
      if (init == 1) {
        return obj;
      } else {
        obj
          .then(res => {
            console.log(res);
            that.match_item = res.result.list;
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  // margin-top: 1rem;
  margin-bottom: 1rem;
  height: 100%;
  overflow: hidden;
  font-size: 0.7rem;
  color: #686868;

  .header_bg {
    text-align: center;
    background: #3333ff;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 20%;
    }
  }

  .cell_group {
    width: 90%;
    margin-left: 5%;
    margin-top: 1rem;
    border-radius: 0.5rem;
    padding: 5px 0;

    .cell_items {
      &:after {
        content: none;
      }

      font-size: 0.7rem;
      padding: 5px 16px;
      background: none;

      .cell_title {
        font-size: 0.7rem;
        text-align: justify;
        text-align-last: justify;
        display: inline-block;
      }

      .right_item {
        flex: 4;
        text-align: left;
        font-size: 0.7rem;

        &.fee_item {
          color: #ff9823;
          font-weight: 900;
          font-size: 0.8rem;
        }
      }
    }
  }

  .bottom_buttons {
    width: 90%;
    margin-left: 5%;
    margin-top: 3rem;

    .btn {
      height: 3rem;
      line-height: 3rem;
      border-radius: 0.5rem;
      width: 100%;
      margin-bottom: 1rem;
      border: 0;

      &.btn-default {
        border: 1px solid #ccc;
        background: none;
      }

      &.btn-info {
        color: white;
        background: #33f;
      }
    }
  }
}
</style>
